<template>
  <div class="saveUpdate">
    <el-dialog title="详情" :visible.sync="showDialog" @close="$emit('update:showUpdate', 0)"
               :showUpdate="showUpdate" width="600px">
      <el-form :model="DetailInfo" ref="saveChn" label-width="120px" size="mini">
        <p v-if="!listLoading">数据加载中...</p>
        <dialog-wrapper :MaxWidth="800" size="mini" v-if="listLoading">
          <el-row>
            <el-col :span="24"><span>问题出现时间：{{DetailInfo.appear_at}}</span></el-col>
          </el-row>
          <el-row>
            <el-col :span="12"><span>机型：{{DetailInfo.phone_model}}</span></el-col>
            <el-col :span="12"><span>网络状况：{{DetailInfo.net === 0?'WIFI': DetailInfo.net === 1?'4G':DetailInfo.net === 2?'3G':'2G'}}</span></el-col>
          </el-row>
          <el-row>
            <el-col :span="12"><span>联系方式：{{contactType[DetailInfo.contact_type] }}</span></el-col>
            <el-col :span="12"><span>联系号码：{{DetailInfo.contact_account}}</span></el-col>
          </el-row>
          <el-row>
            <el-col :span="24">问题描述：{{DetailInfo.desc}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">图片：</el-col>
            <el-col :span="20">
              <a v-for="(item, index) in DetailInfo.images" :href="item" :key="index" target="_blank" >
                <img :src="item" style="width: 30px">
              </a>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <el-col :span="4">是否解决：</el-col>
            <el-col :span="8">
              <el-select v-model="DetailInfo.status" clearable placeholder="请选择">
                <el-option v-for="item in status_list" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-col>
          </el-row>
          <br/>
          <el-row>
            <el-col :span="4"> 备注：</el-col>
            <el-col :span="19">
              <el-input v-model="DetailInfo.remark" placeholder="请输入备注..."></el-input>
            </el-col>
          </el-row>
        </dialog-wrapper>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:showUpdate', 0)" size="small">取 消</el-button>
        <el-button v-if="status === 0 || status === 1" type="primary" :loading="loading" @click="updateDetail" size="small">确 定
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import DialogWrapper from '@/components/DialogWrapper'
  import {getLoginHelpById, updateLoginHelpById} from '@/api'
  import {queryFilter} from '@/utils/patch'

  export default {
    components: {DialogWrapper},
    data() {
      return {
        showDialog: this.showUpdate,
        loading: false,
        listLoading: false,
        DetailInfo: {},
        imageUrl: '',
        pay_type: this.$store.state.app.pay_type,
        status: false,

        contactType: this.$store.state.app.contactType,
        status_list: [{label: '待处理',value: 0},{label: '处理中',value: 1},{label: '已处理',value: 2}]
      }
    },
    props: {
      showUpdate: {
        type: Boolean,
        default: false
      },
      id: {
        type: Number
      },
      problemsTypeList: {
        type: Array
      }
    },
    created() {
      if (this.id) {
        this.getDetail()
      }
    },
    methods: {

      updateDetail() {
        let requstOjb = {
          status: this.DetailInfo.status,
          remark: this.DetailInfo.remark,
          // response: this.DetailInfo.response
        }
        let queryObj = queryFilter(requstOjb)
        updateLoginHelpById(this.id, queryObj).then(res => {
          console.log(res,'up')
          if (res.status === 0) {
            this.$message({type: 'success', message: '编辑成功'})
            this.$emit('update:showUpdate', false)
          }
        })
      },
      getDetail() {
        getLoginHelpById(this.id).then(res => {
          console.log(res, 'get')
          if (res.status === 0) {
            this.DetailInfo = res.data
            this.status = this.DetailInfo.status
            this.listLoading = true
          }
        }).catch(()=>{
          this.listLoading = true
        })
      },
    }
    ,
    watch: {
      showUpdate() {
        this.showDialog = this.showUpdate
      }
    }
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .el-row {
    margin-top: 5px;
  }
</style>
